<!-- 添加文章 -->
<template>
    <div>
        <!-- 卡片视图 -->
        <el-card shadow="never">
            <el-form ref="addArticleform" :rules="rules" :model="addArticleform" label-width="80px">
                <el-form-item label="文章标题" prop="title">
                    <el-input v-model="addArticleform.title"></el-input>
                </el-form-item>

                <!-- options：数据源 -->
                <!-- props：指定配置对象 -->
                <el-form-item label="文章分类" prop="cate_id">
                    <el-cascader placeholder="请选择文章分类" v-model="selectedKeys" :options="CateList" :props="cascaderProps" @change="parentCateChanged" clearable></el-cascader>
                </el-form-item>

                <el-form-item label="缩略图" prop="image">
                    <Upload @returnImgUrl="imageUrl"></Upload>
                </el-form-item>
                <el-form-item label="显示类型" prop="flag">
                    <el-radio-group v-model="addArticleform.flag">
                        <el-radio label="0">无</el-radio>
                        <el-radio label="1">推荐</el-radio>
                        <el-radio label="2">置顶</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="关键字" prop="keywords">
                    <el-input v-model="addArticleform.keywords"></el-input>
                </el-form-item>
                <el-form-item label="文章描述" prop="desc">
                    <el-input type="textarea" v-model="addArticleform.desc"></el-input>
                </el-form-item>
                <el-form-item label="文章内容" prop="content">
                    <mavon-editor v-model="addArticleform.content" ref="md" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">立即创建</el-button>
                    <el-button @click="reSet">取消</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
    import Upload from '@/components/upload'

    export default {
        components: {
            Upload,
        },
        data() {
            return {
                // 选中的父级Id数组
                selectedKeys: [],
                // 三级分类列表
                CateList: [],
                // 指定级联选择器的配置对象
                cascaderProps: {
                    // 配置触发选项 hover/click
                    expandTrigger: 'click',
                    value: 'cate_id',
                    label: 'cate_name',
                    children: 'children',
                },

                addArticleform: {},
                rules: {
                    title: [
                        {
                            required: true,
                            message: '请输入文章标题',
                            trigger: 'blur',
                        },
                        {
                            min: 5,
                            message: '长度在最少为5个字符',
                            trigger: 'blur',
                        },
                    ],
                    selectedKeys: [
                        {
                            type: 'array',
                            required: true,
                            message: '请至少选择一个活动性质',
                            trigger: 'blur',
                        },
                    ],
                    // selectedKeys: [
                    //     {
                    //         type: "array",
                    //         required: true,
                    //         message: "请选择文章分类",
                    //         trigger: "change",
                    //     },
                    // ],
                    flag: [
                        {
                            required: true,
                            message: '请选择显示类型',
                            trigger: 'change',
                        },
                    ],
                },
            }
        },
        created() {
            this.getCateList()
        },
        computed: {
            getCateId() {
                if (this.addForm.goods_cat.length === 3) {
                    return this.addForm.goods_cat[2]
                }
                return null
            },
        },
        methods: {
            imageUrl(returnImgUrl) {
                this.addArticleform.image = returnImgUrl
            },
            // async getCategoryList() {
            //     const { data: res } = await this.$http.get("/category");
            //     if (res.status !== 200) {
            //         return this.$message.error(res.message);
            //     }
            //     console.log(res);
            //     this.categoryList = res.results;
            //     console.log(this.categoryList);
            // },
            // 级联选择器选中项变化时出发

            // handleChange() {
            //     if (this.addForm.goods_cat.length !== 3) {
            //         this.addForm.goods_cat = [];
            //     }
            // },

            onSubmit() {
                this.$refs.addArticleform.validate(async valid => {
                    if (valid) {
                        const { data: res } = await this.$http.post(
                            '/article',
                            this.addArticleform
                        )
                        console.log(this.addArticleform)
                        if (res.status !== 200) {
                            return this.$message.error(res.message)
                        }
                        console.log(res)
                        this.$message.success(res.message)
                        this.$router.push('/blogList')
                    }
                })
            },
            reSet() {
                this.$router.push('/blogList')
            },

            // 获取三级分类的数据
            async getCateList() {
                const { data: res } = await this.$http.get('category_parent', {
                    params: { level: 2 },
                })
                if (res.status !== 200) {
                    return this.$message.error(res.message)
                }
                this.CateList = res.results
                console.log(this.CateList)
            },
            // 添加分类 选择项发生变化触发
            parentCateChanged() {
                // 如何selectKeys 数组的长度>0 说明选中父级分类
                if (this.selectedKeys.length > 0) {
                    // 父级分类的Id
                    this.addArticleform.cate_id =
                        this.selectedKeys[this.selectedKeys.length - 1]
                    return 0
                } else {
                    // 父级分类的Id
                    this.addArticleform.cate_id = 0
                }
            },
        },
    }
</script>
<style lang="scss" scoped>
</style>


